<template>
	<div class="sensitivewords">
		<el-dialog title="" :visible.sync="pageIsShow" width="350px" center :destroyOnClose='true'
			:modal-append-to-body="false" @closed="handleClosed">
			<div class="contentBox">
				<div class="">
					敏感词详情
				</div>
				<div v-html="highlightedText" class="stateContent marginT15"></div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				pageIsShow: false, //页面显示
				highlightedText: '', // 高亮显示后的文本
			};
		},
		methods: {
			initData(data) {
				this.pageIsShow = true;
				this.highlightedText = data.highlightedText;
			},
			//关闭
			handleClosed() {
				this.pageIsShow = false;
			}
		}
	};
</script>

<style scoped>
	.contentBox {
		width: 100%;
		padding: 30px 0 80px 0;
		box-sizing: border-box;
		text-align: left;
		overflow: hidden;
	}

	.stateContent {
		width: calc(100% - 10px);
		white-space-collapse: preserve-breaks;
		white-space: pre-line;
		border-radius: 8px;
		height: auto;
		max-height: 52vh;
		overflow-y: auto;
		padding: 2px;
		background-color: #d9ffff;
	}
	
	.sensitivewords :deep(.el-dialog) {
		width: 85%;
		min-width: 85% !important;
		height: auto;
		max-height:  calc(100% - 150px);
		background-image: linear-gradient(to top, #bdc2e8 0%, #bdc2e8 1%, #e6dee9 100%);
		border-radius: 8px;
	}
</style>